<template>
	 
	<uni-transition mode-class="slide-left" class="slideBox" :show="showSlide" @click="close">	
		<view class="settingBox">
			<view class="sTitle">
				<image :src="logo" mode="aspectFit"></image>
				{{appName}}
			</view>
			<view class="menuBox">
				<view @click="goMusicLibrary">
					<view><cicon name="music" :size="36"></cicon></view>
					<text>音乐库</text>
				</view>
				<view @click="$TOOL.navTo('/pages/songlist/songlist')">
					<view><cicon name="playlist" :size="36"></cicon></view>
					<text>歌单</text>
				</view>
				<view @click="$TOOL.navTo('/pages/server/server')">
					<view><cicon name="server" :size="30"></cicon></view>
					<text>管理服务器</text>
				</view>
				<view @click="$TOOL.navTo('/pages/user/user')">
					<view><cicon name="user" :size="36"></cicon></view>
					<text>用户</text>
				</view>
				<view @click="$TOOL.navTo('/pages/about/about')">
					<view><cicon name="info" :size="32"></cicon></view>
					<text>关于</text>
				</view>
				<view @click="logout">
					<view><cicon name="loginout" :size="36" color="#FF5757"></cicon></view>
					<text>退出登录</text>
				</view>
			</view>
		</view> 
	</uni-transition>
</template>

<script>
	import logo from '@/static/logo.png'
	export default {
		name:"sliderSetting",
		data() {
			return {
				logo,
				showSlide:false,
				appName:'AsMusic'
			};
		},
		methods:{
			show(){
				this.showSlide = true
			},
			close(){
				this.showSlide = false
			},
			goMusicLibrary(){
				let currentRoute = getCurrentPages()[getCurrentPages().length - 1].route
				if(currentRoute!=='pages/index/index'){
					uni.redirectTo({
						url: '/pages/index/index'
					});
				}
				this.close()
				
			},
			
			logout(){
				// this.$TOOL.data.clear()
				
				//清除登录信息
				this.$API.logout.request().then((e)=>{
					 this.$TOOL.data.remove('sdid')
					 this.$TOOL.data.remove('playList')
					 this.$TOOL.data.remove('songList')
					 this.$TOOL.data.remove('playMusic')
					 this.$TOOL.data.remove('lyrics')
					 this.$TOOL.data.remove('server_url')
					 this.$TOOL.data.remove('lycTop')
					 
					 //停止播放
					 this.$parent.$refs.mplayer.stop()
					 // this.$parent.musicNotification.cancel()
					 
					 uni.redirectTo({
					 	url: '/pages/login/login'
					 });
					 
				})
				
				
			},
		},
	}
</script>

<style lang="scss" scoped>
	.slideBox{
		width: 100vw;
		height: 100vh;
		position: absolute;
		left: 0;
		top: 0;
		.settingBox{
			width: 40%;
			height: calc(100% - 70rpx);
			box-shadow: 0 0 12px #0000001f;  
			background: #F9FAFC; 
			padding: 0 40rpx;
			padding-top: 70rpx;
			.sTitle{
				font-size: 36rpx; 
				font-weight: 900;
				margin-bottom: 80rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}
			
			.menuBox{
				background: #fff;
				padding: 20rpx 40rpx;
				font-size: 28rpx;
				border-radius: 20rpx;
				opacity: 0.8;
				>view{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					padding: 20rpx 0;
					font-weight: 400;
					text{
						margin-left: 40rpx;
					}
					>view{
						width: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					&:last-child{
						color: #FF5757;
					}
				}
			}
		}
		 
	}
	
	
</style>